import { defineStore } from 'pinia'

export const useQuestionStore = defineStore({
    // store 的唯一 id
    id: 'questionStore',

    // 定义 state
    state: () => ({
        questions: [
            {
                questionId: "1",
                text: "01-单选",
                type: "RadioButton",
                options: [
                    { value: "0", text: "服务优" },
                    { value: "1", text: "服务良" }
                ],
                ruleLogic: {
                    jumpLogic: [
                        {
                            matchValue: "0",
                            targetQuestionId: "3",
                            isUsing: false // 是否启用，默认为 false
                        }
                    ]
                },
                visible: true, // 是否可见
                visibleCount: 0  // 用于跟踪跳题逻辑对其影响的次数
            },
            {
                questionId: "2",
                text: "02-多选：",
                type: "CheckBox",
                options: [
                    { value: "1", text: "选项1" },
                    { value: "2", text: "选项2" },
                    { value: "3", text: "选项3" },
                    { value: "4", text: "选项4" }
                ],
                ruleLogic: {
                    exclusive: [
                        { value: "1", exclusive: ["4"] },
                        { value: "2", exclusive: ["4"] },
                        { value: "4", exclusive: ["1", "2"] }
                    ],
                    jumpLogic: [
                        {
                            matchValue: "1",
                            targetQuestionId: "4",
                            isUsing: false // 是否启用，默认为 false
                        }
                    ]
                },
                visible: true,
                visibleCount: 0
            },
            {
                questionId: "3",
                text: "03-多选：",
                type: "CheckBox",
                options: [
                    { value: "1", text: "选项1" },
                    { value: "2", text: "选项2" },
                    { value: "3", text: "选项3" },
                    { value: "4", text: "选项4" }
                ],
                ruleLogic: {
                    exclusive: [
                        { value: "1", exclusive: ["4"] },
                        { value: "2", exclusive: ["4"] },
                        { value: "4", exclusive: ["1", "2"] }
                    ],
                    jumpLogic: [
                        {
                            matchValue: "1",
                            targetQuestionId: "5",
                            isUsing:false,//是否正在启用，默认为false
                        }
                    ]
                },
                visible: true,
                visibleCount: 0
            },
            {
                questionId: "4",
                text: "04-单选",
                type: "RadioButton",
                options: [
                    { value: "0", text: "服务优" },
                    { value: "1", text: "服务良" }
                ],
                ruleLogic: {
                    jumpLogic: [
                    ]
                },
                visible: true, // 是否可见
                visibleCount: 0  // 用于跟踪跳题逻辑对其影响的次数
            },
            {
                questionId: "5",
                text: "05-单选",
                type: "RadioButton",
                options: [
                    { value: "0", text: "服务优" },
                    { value: "1", text: "服务良" }
                ],
                ruleLogic: {
                    jumpLogic: [
                    ]
                },
                visible: true, // 是否可见
                visibleCount: 0  // 用于跟踪跳题逻辑对其影响的次数
            },
            {
                questionId: "6",
                text: "06-单行文本",
                type: "SingleLineText",
                options: [
                    { prefixText:"文本一" },
                    { prefixText:"文本二" }
                ],
                ruleLogic: {
                    jumpLogic: []
                },
                visible: true, // 新增可见性属性
                visibleCount: 0  // 用于跟踪跳题逻辑对其影响的次数
            },
            {
                questionId: "7",
                text: "7-多行文本",
                type: "MultiLineText",
                options: [
                    { prefixText:"文本一" },
                    { prefixText:"文本二" }
                ],
                ruleLogic: {
                    jumpLogic: []
                },
                visible: true, // 新增可见性属性
                visibleCount: 0  // 用于跟踪跳题逻辑对其影响的次数
            },
            {
                questionId: "8",
                text: "8-下拉框",
                type: "DropdownSelect",
                options: [
                    { value:"文本一",text:"文本一" },
                    { value:"文本二",text:"文本二" },
                    { value:"文本三",text:"文本三" }
                ],
                visible: true, // 新增可见性属性
                visibleCount: 0  // 用于跟踪跳题逻辑对其影响的次数
            },
            {
                questionId: "9",
                text:"9-说明题",
                type: "DescriptionQuestion", // 题目类型
                descriptions: {
                    pre: "这是前置说明，在题目说明之前展示。",
                    main: "这是题目的主说明部分。",
                    post: "这是后置说明，在题目说明之后展示。"
                },
                visible: true, // 可见性
                visibleCount: 0
            },
            {
                questionId: "10",
                text: "10-多级下拉框",
                type: "CascadingDropdown",
                options: [
                    {
                        value: 'zhejiang',
                        label: 'Zhejiang',
                        children: [
                            {
                                value: 'hangzhou',
                                label: 'Hangzhou',
                                children: [
                                    {
                                        value: 'xihu',
                                        label: 'West Lake',
                                    },
                                ],
                            },
                        ],
                    },
                    {
                        value: 'jiangsu',
                        label: 'Jiangsu',
                        children: [
                            {
                                value: 'nanjing',
                                label: 'Nanjing',
                                children: [
                                    {
                                        value: 'zhonghuamen',
                                        label: 'Zhong Hua Men',
                                    },
                                ],
                            },
                        ],
                    },
                ],
                levelLabels: ["省/直辖市", "市", "区/县"], // 这里定义每一层的名称
                ruleLogic: {
                    jumpLogic: []
                },
                visible: true,
                visibleCount: 0
            },
        ],
        answers: [
            {
                questionId: "1",
                type: "RadioButton",
                answer: ""
            },
            {
                questionId: "2",
                type: "CheckBox",
                answer: []
            },
            {
                questionId: "3",
                type: "CheckBox",
                answer: []
            },
            {
                questionId: "4",
                type: "RadioButton",
                answer: ""
            },
            {
                questionId: "5",
                type: "RadioButton",
                answer: ""
            },
            {
                questionId: "6",
                type: "SingleLineText",
                answer: [
                    {answer:''},
                    {answer:''}
                ]
            },
            {
                questionId: "7",
                type: "MultiLineText",
                answer: [
                    {answer:''},
                    {answer:''}
                ]
            },
            {
                questionId: "8",
                type: "DropdownSelect",
                answer: ""
            },
            {
                questionId: "10",
                type: "CascadingDropdown",
                answer: ["zhejiang", "hangzhou", "xihu"] // 答案数组，依次存储每一级选中的值
            },
        ]
    }),

    // 定义 getters
    // 类似于vue的计算属性
    // 传参需要在返回一个函数，然后在对应的地方用这个函数
    // 定义有两种方式，箭头函数和普通函数，区别在于普通函数使用this调用state，而箭头函数设计的传入的默认第一个参数就是state
    getters: {
        // 获取问题数量
        questionCount: (state) => state.questions.length,

        // 根据 questionId 获取特定问题
        getQuestionById: (state) => (id) => {
            return state.questions.find(question => question.questionId === id)
        },
        getQuestions:(state)=>{
            return state.questions;
        },
        getAnswerById:(state)=>(id)=>{{
            return state.answers.find(answer=>answer.questionId===id)
        }},

    },

    // 定义 actions
    // 与getter不同，用箭头函数（实际上就是箭头函数不创建自己的this，而是继承外部的this，也就是state实例）会导致无法访问state的问题，因而只能用传统函数
    actions: {
        // 添加新问题
        addQuestion(newQuestion) {
            this.questions.push(newQuestion)
        },

        // 更新问题
        updateQuestion(updatedQuestion) {
            const index = this.questions.findIndex(q => q.questionId === updatedQuestion.questionId)
            if (index !== -1) {
                this.questions[index] = updatedQuestion
            }
        },

        // 删除问题
        deleteQuestion(questionId) {
            this.questions = this.questions.filter(q => q.questionId !== questionId)
        },
        //处理跳题逻辑
        //和getter那一样，方便起见都用钩子函数
        //也是因为这个原因，钩子函数的第一个参数是state
        handleJumpToQuestion(nowQuestionId,targetQuestionId,isVisible){
            const nowIndex = this.questions.findIndex(q => q.questionId === nowQuestionId);
            const targetIndex = this.questions.findIndex(q => q.questionId === targetQuestionId);

            // 遍历跳题范围内的题目
            for (let i = nowIndex + 1; i < targetIndex; i++) {
                if (isVisible) {
                    this.questions[i].visibleCount--;
                } else {
                    this.questions[i].visibleCount++;
                }

                // 如果 visibleCount 为 0，表示不再有其他跳题逻辑影响该题目，可以显示
                this.questions[i].visible = this.questions[i].visibleCount === 0;
            }
        }
    }
})

// 封装对 question store 的访问逻辑
// ——主要是getter那里定义需要传参的计算属性时，需要return一个函数
// ——实际上这个封装就是这里封装了，store和action都只访问了一下原变量或是调了一下原函数而已
// action支持异步操作
export function useQuestions() {
    const store = useQuestionStore()

    // 将 store 中的状态和方法进行封装
    /* Store */
    const questions11 = store['questions'];
    const answers11=store['answers'];

    /*getter*/
    const getQuestionById = (id) => {
        return store.getQuestionById(id)
    }
    const getAnswerById=(id)=>{
        return store.getAnswerById(id);
    }
    const questionCount=store.questionCount;
    /*Action*/
    const handleJumpLogic=(nowQuestionId,targetQuestionId,isVisible)=>{
        store.handleJumpToQuestion(nowQuestionId,targetQuestionId,isVisible)
    }

    const addQuestion = (newQuestion) => {
        store.addQuestion(newQuestion)
    }

    const updateQuestion = (updatedQuestion) => {
        store.updateQuestion(updatedQuestion)
    }

    const deleteQuestion = (questionId) => {
        store.deleteQuestion(questionId)
    }

    return {
        questions11,
        answers11,
        addQuestion,
        updateQuestion,
        questionCount,
        deleteQuestion,
        getQuestionById,
        getAnswerById,
        handleJumpLogic
    }
}